<template>
  <div class="app-container" style="padding:20px 30px;">

    <el-breadcrumb separator="/" style="margin-top:10px;">
      <el-breadcrumb-item>新闻评审</el-breadcrumb-item>
      <el-breadcrumb-item>评审详情页</el-breadcrumb-item>
    </el-breadcrumb>

    <el-skeleton v-if="loading" :rows="10" />

    <el-tabs v-else v-model="activeName" style="margin: 15px 0;" @tab-click="handleClick">
      <el-tab-pane label="详情" name="first">
        <el-descriptions class="margin-top" :title="`新闻标题：${form.news_title}`" :column="2" :size="'medium'">
          <template slot="extra">
            <el-button v-if="form.is_rec == null" type="primary" icon="el-icon-star-on" size="small" @click="recommend">推荐</el-button>
            <el-button v-else type="danger" icon="el-icon-star-on" size="small" @click="unrecommend">取消推荐</el-button>
          </template>
          <el-descriptions-item label="作品标题">{{ form.news_title }}</el-descriptions-item>
          <el-descriptions-item label="体裁">
            <el-tag size="small">{{ form.genre }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="作者姓名">{{ form.author_name }}</el-descriptions-item>
          <el-descriptions-item label="编者">{{ form.editor }}</el-descriptions-item>
          <el-descriptions-item label="署名排序">{{ form.byline_order }}</el-descriptions-item>
          <el-descriptions-item label="作品链接">{{ form.news_link }}</el-descriptions-item>
        </el-descriptions>

        <el-descriptions class="margin-top" :title="`刊指平台`" :column="3" :size="'medium'" style="margin-top: 15px;">
          <template v-for="(item,index) in form.publication_json">
            <el-descriptions-item :key="`p${index}`" label="平台">{{ item.publication_platform }}</el-descriptions-item>
            <el-descriptions-item :key="`d${index}`" label="日期">{{ item.publication_date }}</el-descriptions-item>
            <el-descriptions-item :key="`l${index}`" label="版面">{{ item.publication_layout }}</el-descriptions-item>
          </template>
        </el-descriptions>

        <el-descriptions class="margin-top" :title="`作品简介`" :column="1" :size="'medium'" style="margin-top: 15px;">
          <el-descriptions-item label="简介">{{ form.work_summary }}</el-descriptions-item>
        </el-descriptions>

        <el-descriptions class="margin-top" :title="`填报人信息`" :column="2" :size="'medium'" style="margin-top: 15px;">
          <el-descriptions-item label="姓名">{{ form.reporter }}</el-descriptions-item>
          <el-descriptions-item label="联系方式">{{ form.reporter_phone }}</el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
      <el-tab-pane label="盖章页" name="second">

        <el-table
          :data="form.back_attachments"
          style="width: 100%"
        >
          <el-table-column
            prop="file_name"
            label="文件名"
          />
          <el-table-column prop="file_fullurl" label="预览">
            <template slot-scope="scope">
              <el-image
                v-if="scope.row.file_ext === 'jpg' || scope.row.file_ext === 'jpeg' || scope.row.file_ext === 'png' || scope.row.file_ext === 'gif'"
                style="width: 100px;"
                :src="scope.row.file_fullurl"
                :preview-src-list="[scope.row.file_fullurl]"
              />
              <el-tag v-else class="el-icon-download" @click="download(scope.row.file_fullurl)">下载</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="file_fullurl" label="路径" />
          <el-table-column prop="file_size" label="文件大小" width="100">
            <template slot-scope="attachment">
              <el-tag type="warning">{{ parseInt(attachment.row.file_size/1024) }}KB</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="file_ext" label="文件后缀" width="100">
            <template slot-scope="scope">
              <el-tag type="success">{{ scope.row.file_ext }}</el-tag>
            </template>
          </el-table-column>
        </el-table>

      </el-tab-pane>
      <el-tab-pane label="附件" name="third">

        <el-table
          :data="form.attachments"
          style="width: 100%"
        >
          <el-table-column
            prop="file_name"
            label="文件名"
          />
          <el-table-column prop="file_fullurl" label="预览">
            <template slot-scope="scope">
              <el-image
                v-if="scope.row.file_ext === 'jpg' || scope.row.file_ext === 'jpeg' || scope.row.file_ext === 'png' || scope.row.file_ext === 'gif'"
                style="width: 100px;"
                :src="scope.row.file_fullurl"
                :preview-src-list="[scope.row.file_fullurl]"
              />
              <el-tag v-else class="el-icon-download" @click="download(scope.row.file_fullurl)">下载</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="file_fullurl" label="路径" />
          <el-table-column prop="file_size" label="文件大小" width="100">
            <template slot-scope="attachment">
              <el-tag type="warning">{{ parseInt(attachment.row.file_size/1024) }}KB</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="file_ext" label="文件后缀" width="100">
            <template slot-scope="scope">
              <el-tag type="success">{{ scope.row.file_ext }}</el-tag>
            </template>
          </el-table-column>
        </el-table>

      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
import { getReviewCounts, getReviewDetail, reviewRecommend, reviewUnRecommend } from '@/api/newsDeclare'

export default {
  name: 'Detail',
  components: { },
  data() {
    return {
      nid: '',
      activeName: 'first',
      form: {},
      loading: false
    }
  },
  mounted() {
    console.log('moute')
    this.nid = this.$route.query.nid
    this.getDetail()
  },
  created() {
  },
  methods: {
    unrecommend() {
      const that = this
      this.$confirm('确定要推荐该新闻吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        reviewUnRecommend(this.form.id).then(response => {
          that.loading = false
          if (response.code === 10000) {
            that.$notify.success(response.message)
            that.getDetail()
          } else {
            that.$notify.error(response.message)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    recommend() {
      const that = this
      this.$confirm('确定要推荐该新闻吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        reviewRecommend(this.form.id).then(response => {
          that.loading = false
          if (response.code === 10000) {
            that.$notify.success(response.message)
            that.getDetail()
          } else {
            that.$notify.error(response.message)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    download(url) {
      location.href = url
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    getDetail() {
      this.loading = true
      getReviewDetail(this.nid).then(response => {
        if (response.code === 10000) {
          if (response.data == null) {
            this.$router.push({
              path: '/'
            })
          }
          this.form = response.data
        }
        this.loading = false
      })
    }
  }
}
</script>

<style lang="less" scoped>

</style>
